<script setup>
import LogoWithTitle from "@/components/elements/images/LogoWithTitle.vue";
import UnorderedListOfLinks from "@/components/lists/links/UnorderedListOfLinks.vue";
import BaseButtonAsALink from "@/components/elements/buttons/BaseButtonAsALink.vue";
import HamburgerButtonOnMobileScreen from "@/components/elements/buttons/HamburgerButtonOnMobileScreen.vue";
import BaseLink from "@/components/elements/links/BaseLink.vue";
</script>

<template>

  <header>
    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
      <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
        <LogoWithTitle image-src="https://flowbite.com/docs/images/logo.svg" />
        <div class="flex items-center lg:order-2">
          <BaseLink />
          <BaseLink />
          <HamburgerButtonOnMobileScreen />
        </div>
        <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
           <UnorderedListOfLinks />
        </div>
      </div>
    </nav>
  </header>

</template>

<style scoped>

</style>